<template>
  <div class="manage-content"
    v-loading="listLoading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)">
    <div class="search-content">
      <div class="search-item">
        <el-select 
          v-model="searchParams"
          placeholder="请选择监督点"
          class="item-select alone"
          @change="getTableList(1, true)">
          <el-option
            v-for="item in superviseList"
            :key="item.pointId"
            :label="item.pointName"
            :value="item.pointId">
          </el-option>
        </el-select>
      </div>
      <el-button v-if="pushBtn" class="search-btn" type="primary" @click="$emit('pushClue', true)">推送</el-button>
    </div>
    <div class="table-content">
      <div class="list" v-show="tableData.length > 0">
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%;height: 100%"
          height="100%">
          <el-table-column
            label="序号"
            type="index"
            width="68">
            <template slot-scope="scope">
              <span>{{(tablePageData.currentPage - 1) * tablePageData.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="监督对象"
            min-width="150">
            <template slot-scope="scope">
              <!-- <el-tooltip :content="scope.row.reportObject" placement="top"> -->
                <span class="desc-style">{{scope.row.reportObject}}</span>
              <!-- </el-tooltip> -->
            </template>
          </el-table-column>
          <el-table-column
            label="监督对象名称"
            min-width="150">
            <template slot-scope="scope">
              <!-- <el-tooltip :content="scope.row.reportObjectName" placement="top"> -->
                <span class="desc-style">{{scope.row.reportObjectName}}</span>
              <!-- </el-tooltip> -->
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in tablePageData.columns"
            :key="index"
            :label="item"
            min-width="200"
            >
            <template slot-scope="scope">
              <!-- <el-tooltip :content="scope.row.map[item]" placement="top"> -->
                <span class="desc-style">{{scope.row.map[item]}}</span>
              <!-- </el-tooltip> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box" v-show="tableData.length > 0">
        <el-pagination
          class="table-page"
          @size-change="handelSizeChange"
          @current-change="handelCurrentChange"
          :current-page="tablePageData.currentPage"
          :page-sizes="tablePageData.pageSizes"
          :page-size="tablePageData.pageSize"
          background
          layout="total, sizes, slot, prev, pager, next"
          :total="tablePageData.total">
          <span class="page-item first" @click="handelCurrentChange(1)">首页</span>
        </el-pagination>
        <el-pagination
          class="table-page"
          @current-change="handelCurrentChange"
          :current-page="tablePageData.currentPage"
          :page-sizes="tablePageData.pageSizes"
          :page-size="tablePageData.pageSize"
          background
          layout="slot"
          :total="tablePageData.total">
          <span class="page-item" @click="handelCurrentChange(Math.ceil(tablePageData.total/tablePageData.pageSize))">末页</span>
          <span class="page-jumper">跳至<el-input class="page-num" v-model="tablePageData.inputNum" @input.native="tablePageData.inputNum = JSON.stringify(tablePageData.inputNum).replace(/[^0-9]/g,'')" @blur="handelCurrentChange(tablePageData.inputNum)" @keyup.enter.native="handelCurrentChange(tablePageData.inputNum)"></el-input>页</span>
        </el-pagination>
      </div>
      <Empty v-show="tableData.length === 0" imgHeight="42%" />
    </div>
  </div>
</template>

<script>
  import Empty from './empty';
  import { ClueResource } from '../axios/index';
  export default {
    name: 'SupervisionPointList',
    props: {
      pushBtn: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number,
        default: null
      },
      taskLogId: {
        type: Number,
        default: null
      },
      supervisionPointId: {
        type: Number,
        default: null
      },
      activeExportName: {
        type: String,
        default: ''
      },
      pushId: {
        type: Number,
        default: null
      },
      type: {
        type: String,
        default: ''
      },
    },
    components: {
      Empty
    },
    data() {
      return {
        // 表格相关
        listLoading: false,
        checkLoading: false,
        tableData: [],
        tablePageData: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
          pageSizes: [10, 20, 50],
          inputNum: 1,
          columns: []
        },
        searchParams: '',
        oldCheckSearchParams: '0',
        // 监督点下拉列表
        superviseList: []
      }
    },
    mounted() {
      this.searchParams = this.supervisionPointId
      this.getSuperviseList();
    },
    methods: {
      // 获取下列表
      getSuperviseList() {
        let getPonitsName = null;
        if(this.pushId) {
          getPonitsName = ClueResource.getPonitsByPushId({
            pushId: this.pushId
          })
        }
        else {
          getPonitsName = ClueResource.getPonits({
            taskId: this.id
          })
        }
        getPonitsName
        .then(res => {
          if(res.data) {
            this.superviseList = res.data;
            if(this.superviseList.length > 0) {
              // this.searchParams = this.superviseList[0].pointId;
              // this.oldCheckSearchParams = this.superviseList[0].pointId;
              this.getTableList();
            } else {
              this.$emit('canDownLoad', false);
            }
          }
        })
      },
      // 获取列表数据
      getTableList(page, record) {
        if(page) {
          this.tablePageData.currentPage = page;
          this.tablePageData.inputNum = page;
        }
        if(record) {
          // this.oldCheckSearchParams = JSON.parse(JSON.stringify(this.searchParams));
        }
        let returnTrue = false;
        setTimeout(() => {
          if(!returnTrue) {
            this.listLoading = true;
          }
        }, 100)
        let listName = null;
        if(this.type === 'inquisitor') {
          listName = ClueResource.getinquisitorPonitsList({
            pointId: this.searchParams,
            pageNo: this.tablePageData.currentPage,
            pageSize: this.tablePageData.pageSize,
            pushId: this.taskLogId,
          })
        }
        else {
          listName = ClueResource.getPonitsList({
            pointId: this.searchParams,
            pageNo: this.tablePageData.currentPage,
            pageSize: this.tablePageData.pageSize,
            taskLogId: this.taskLogId
          })
        }
        listName
        .then(res => {
          returnTrue = true;
          this.listLoading = false;
          this.tablePageData.total = parseInt(res.data.total);
          this.tablePageData.columns = res.data.columns || [];
          if(res.data && res.data.data) {
            this.tableData = res.data.data;
          }
          else {
            this.tableData = [];
          }
          if (this.tableData && this.tableData.length > 0) {
            this.$emit('canDownLoad', true);
          } else {
            this.$emit('canDownLoad', false);
          }
        })
        .catch(() => {
          this.$emit('canDownLoad', false);
          returnTrue = true;
          this.listLoading = false;
        })
      },
      // 改变每页size
      handelSizeChange(val) {
        this.tablePageData.pageSize = val;
        // this.searchParams = JSON.parse(JSON.stringify(this.oldCheckSearchParams));
        this.getTableList(1)
      },
      // 切页
      handelCurrentChange(val) {
        val = parseInt(val);
        if(!val || val <= 0) {
          val = 1;
        }
        else if(val > Math.ceil(this.tablePageData.total / this.tablePageData.pageSize)) {
          val = Math.ceil(this.tablePageData.total / this.tablePageData.pageSize);
        }
        this.tablePageData.inputNum = val;
        if(val === this.tablePageData.currentPage) {
          return
        }
        this.tablePageData.currentPage = val;
        // this.searchParams = JSON.parse(JSON.stringify(this.oldCheckSearchParams));
        this.getTableList();
      },
      // 下载
      downLoad() {
        this.listLoading = true;
        this.$emit('canDownLoad', false);
        let downName = null;
        if(this.type === 'inquisitor') {
          downName = ClueResource.exportChakan({
            pushId: this.taskLogId,
            pointId: this.searchParams,
            pointName: this.superviseList.find(item => item.pointId === this.searchParams).pointName
          })
        }
        else {
          downName = ClueResource.exportInfo({
            taskLogId: this.taskLogId,
            pointId: this.searchParams
          })
        }
        downName
        .then(res => {
          this.listLoading = false;
          this.$emit('modelClose');
          let url = window.URL.createObjectURL(res);
          let a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          a.download = `${this.activeExportName}.xlsx`;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
          this.$emit('canDownLoad', true);
        })
        .catch(() => {
          this.$emit('canDownLoad', true);
          this.listLoading = false;
        })
      }
    },
    computed: {
    }
  }
</script>

<style scoped lang="scss">
  .manage-content {
    width: 100%;
    height: 100%;
  }
</style>
